✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	2fb3373
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/659671ea3620a80008371650
😎 Deploy Preview	https://deploy-preview-1349--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Remains to be done/fixed:

• On all examples:

  • For each label lines, no matter the tree level, add a truncation + margin/padding right at the end of the line, the 1st one if only one line is allowed or the 2nd one if two are OK. ⚠️ Check with designers was they want on this topic.
    At the moment, we have this behavior:

    .

  • Accordions titles are in bold when they should not.

    

  • Tooltips:

    • They don't have the correct appearance. Will be fixed in Issue Prototyping white arrow with outline for tooltips and popovers #1330.
    • They remain visible after a clic on the element. A click somewhere else makes them disappear. This can't be changed because of Popper.

  • Focus: There is a weird visual behavior when the focus rectangle appears: the vertical borders appear a bit after the horizontal ones. Will be fixed in PR Apply visible focus design guidelines in all components #1437

• In #basic:

  • Display category items in the same order as in the design specifications
  • Add an example, the variant without accordion icons

• In #collapsible-with-title:

  • Add a margin/padding between the end of the closed side-navigation menu and the text "test".
  • Replace the text "test" by another text
    

• In #collapsible-with-content:

  • There shouldn't have a vertical orange bar on a selected category item when the side navigation menu is open. It might required some js to do that which we want to avoid. ⚠️ Therefore, ask the designers to see if it would be ok to leave it as it is and change their specifications. -> Seen in Spec meeting and it's ok to have this one.

    

  • With a too long accordion title label, the accordion arrow disappears, as well as the ones of all the other accordion titles. The label should be truncated so that the arrow remains visible and a space shall be kept between the end of the (truncated) text and the accordion arrow.

    

• In mobile display:

  • The close button icon is not the correct one. (See Offcanvas: Change the close icon #1532)

    

  • There are some extra vertical spaces around the examples. It would better without them supposing they can be reduced/removed

    

  • Add in the doc that the side navigation menu can be situated on the right or on the left of the screen by using a specific css class .name_of_class

Just tracking here a need for an Orange project to discuss with designers.
Be able to open the side menu just by hovering the image (could be an option: display the title OR opening the menu entirely)

Just split PR with #2180 to ease the reviews.

good to me 👍
just add a tabindex=-1 on the ul element of the coolapsible nav to avoid the FF keyboard behavior on overflow content

Level 3 Label position
Move the labels at the 3rd level, 2 pixels to the left.

Arrow size/position
Reduce the size of the horizontal arrow to: Width 12px, Height 6px
I have attached the positioning of this arrow. See attached image.
The size and position of the vertical arrow (that reduces the width of the side navigation) is ok, no need to change that one.

Scroll bar
Is it possible to include the scroll bar inside the width of the menu without increasing the width of the menu?
See the attached example. This would also mean positioning the arrow (on the right) 20px from the right edge.

Selection state
When drilling down the menu, the selection state should only remain on the label that represents the current page selection. Please see the attached example as a reference.